<template>
    <el-breadcrumb class="vea-breadcrumb">
        <el-breadcrumb-item :to="{name:'home'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item>城市管理</el-breadcrumb-item>
    </el-breadcrumb>
<!--    <div class=""></div>-->
    <el-alert :closable="false" type="warning">*相关数据来源高德地图</el-alert>
    <el-table class="vea-table" border height="75vh" row-key="id" lazy :load="loadCity"  :tree-props="{ children: 'children', hasChildren: 'children' }" stripe :data="cityInfo" size="small">
        <el-table-column width="50" type="index" align="center" fixed="left"/>
        <el-table-column label="城市名称" prop="name"/>
        <el-table-column label="上级城市" prop="parentIts.name"/>
        <el-table-column label="行政编码" prop="adcode"/>
        <el-table-column label="简称" prop="abbr"/>
        <el-table-column label="地理坐标" prop="center"/>
    </el-table>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {$ajax, apiUrl} from "@/utils/request";

const cityInfo = ref([])
const loadCity = (row, treeNode, resolve)=>{
    const id = row && row.adcode ? row.adcode : "100000"
    $ajax.get(`${apiUrl}/city/lst`,{params:{id}}).then(({data:{result}})=>{
        if (cityInfo.value.length < 1) {
            cityInfo.value = result;
            return;
        }
        resolve(result)
    })
}

onMounted(()=>{
    loadCity()
})
</script>

<style scoped>

</style>
